<template>
  <el-container>
    <el-aside width="auto">
      <el-menu
      default-active="/resource"
      router
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      @select="handleSelect">
        <el-menu-item index="/resource">
          <i class="el-icon-view"></i>
          <span>资源查看</span>
        </el-menu-item>
        <el-menu-item index="/types">
          <i class="el-icon-menu"></i>
          <span slot="title">资源管理</span>
        </el-menu-item>
        <el-menu-item index="/projects">
          <i class="el-icon-coffee-cup"></i>
          <span slot="title">项目管理</span>
        </el-menu-item>
        <el-menu-item index="/about">
          <i class="el-icon-info"></i>
          <span slot="title">关于</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="header">
          <el-col :span="2" class="toggle">
            <i class="el-icon-s-fold" v-show="icon.left" @click="showMenu(false)"></i>
            <i class="el-icon-s-unfold" v-show="icon.right" @click="showMenu(true)"></i>
          </el-col>
          <el-col :span="21" class="quit">
            <!-- <router-link to="/login">退出</router-link> -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-tag effect="dark">管理员</el-tag>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/login">退出</router-link>
                  </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-header>
        <home v-show="homeshow"></home>
        <router-view v-show="routerShow"/>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import home from '@/views/home/index'
export default {
  name: 'index',
  data () {
    return {
      icon: {
        left: true,
        right: false
      },
      routerShow: false,
      isCollapse: false,
      homeshow: true
    }
  },
  created () {
    console.log(process.env.NODE_ENV)
    // this.$router.push('/source')
  },
  components: {
    home
  },
  methods: {
    handleSelect (key, keyPath) {
      this.homeshow = false
      this.routerShow = true
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    showMenu (v) {
      this.isCollapse = !this.isCollapse
      this.icon.right = !this.icon.right
      this.icon.left = !this.icon.left
    }
  }
}
</script>

<style scoped>
 @import url('index.css');
</style>
